<template>
  <div class="tw-ecoapplist">
    <div class="tw-ecoapplist-content">
      <!-- <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg1">
            <div class="grid-content-title">我的代办</div>
            <div class="grid-content-body">
              <div class="grid-content-value">68</div>
              <div class="grid-content-list">
                <div style="font-size: 16px;"><span class="error bold">【考勤异常】</span><span>2024-06-27周四矿工</span></div>
                <div><span>&nbsp;&nbsp;申请人：</span><span>考勤小助手</span></div>
                <div><span>&nbsp;&nbsp;当前时间</span><span>2024-06-27 00:00:00</span></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg2" >
            <div class="grid-content-title">我的申请</div>
              <div class="grid-content-body">
                <div class="grid-content-value">0</div>
                <div class="grid-content-list">
                  暂未有申请
                </div>
              </div>
          </div>
        </el-col>
        <el-col :span="8">
          <el-carousel height="180px" style="border-radius: 8px;">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 class="small justify-center" text="2xl">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row> -->

      <!-- 我的应用-start -->
      <div class="tw-ecoapplist-scroll mt-medium" v-if="appList">
        <div class="tw-ecoapplist-tabs-content" v-if="visitAppList.length >= 1">
          <div v-for="(item, index) of visitAppList" :key="index" :id="'tw-ecoapplist' + item.categoryId">
            <div class="tw-ecoapplist-title xsub">
              <span>{{ item.label }}</span>
            </div>

            <ul v-if="item.list.length >= 1" class="tw-ecoapplist-module">
              <li
                @click.stop="appEnter(itm, groupAppList)"
                :style="{
                  width: `calc(100% / ${numPerRow})`
                }"
                v-for="(itm, inx) of item.list"
                :key="inx"
                class="tw-ecoapplist-module-item"
              >
                <a class="tw-ecoapplist-app">
                  <img
                    class="tw-ecoapplist-app-img"
                    v-if="itm.img"
                    :src="itm.img.startsWith('http') ? itm.img : `${fsBaseUrl || gateway}/fs/media${itm.img}`"
                    @error="imgError"
                  />
                  <img
                    class="tw-ecoapplist-app-img"
                    v-else-if="appImages[inx]"
                    :src="`${fileBaseUrl}${appImages[inx].localPath}`"
                    @error="imgError"
                  />
                  <img class="tw-ecoapplist-app-img" v-else :src="defaultApp" />
                  <div class="tw-ecoapplist-app-body">
                    <el-tooltip effect="dark" :content="itm.appName" placement="top-start">
                      <h4 class="tw-ecoapplist-app-title">{{ itm.appName }}</h4>
                    </el-tooltip>
                 
                  </div>
                  <img
                    v-if="btnEditeStatus && setAppList(itm)"
                    @click.stop="editMyApp('1', itm)"
                    class="tw-ecoapplist-img-icon"
                    src="./assets/addApp.png"
                  />
                </a>
              </li>
            </ul>
            <!-- <tw-lib-nodata v-else /> -->
          </div>
        </div>
        <div id="tw-ecoapplist11" class="tw-ecoapplist-box">
          <div class="tw-ecoapplist-top">
            <div class="tw-ecoapplist-title">
              <span>我的收藏</span>
              <div class="tw-ecoapplist-title-line"></div>
            </div>
            <div>
              <a class="twui-btn xborder twui-btncanel" v-if="btnEditeStatus" @click.stop="canelSave">取消</a>
              <a class="twui-btn xborder" @click.stop="editeMyApp">
                {{ btnEditeStatus ? "完成" : "添加应用" }}
              </a>
            </div>
          </div>

          <div>
            <div class="tw-ecoapplist-module">
              <div
                :style="{
                  width: `calc(100% / ${numPerRow})`
                }"
                class="tw-ecoapplist-module-item"
                v-for="(itm, inx) in appList"
                :key="itm"
              >
                <a @click.stop="appEnter(itm.appInfo, appList)" class="tw-ecoapplist-app">
                  <img
                    class="tw-ecoapplist-app-img"
                    v-if="itm.appInfo.img || itm.appInfo.icon1"
                    :src="
                      (itm.appInfo.img || itm.appInfo.icon1).startsWith('http')
                        ? itm.appInfo.img
                        : `${fsBaseUrl || gateway}/fs/media${itm.appInfo.img || itm.appInfo.icon1}`
                    "
                    @error="imgError"
                  />
                  <img
                    class="tw-ecoapplist-app-img"
                    v-else-if="appImages[inx]"
                    :src="`${fileBaseUrl}${appImages[inx].localPath}`"
                    @error="imgError"
                  />
                  <img class="tw-ecoapplist-app-img" v-else :src="defaultApp" />
                  <div class="tw-ecoapplist-app-body">
                    <el-tooltip v-if="itm.appInfo" effect="dark" :content="itm.appInfo.appName" placement="top-start">
                      <h4 class="tw-ecoapplist-app-title" v-if="itm.appInfo">{{ itm.appInfo.appName }}</h4>
                    </el-tooltip>
                    <h4 class="tw-ecoapplist-app-title" v-else>已删除应用</h4>
                   
                  </div>
                  <img
                    v-if="btnEditeStatus"
                    @click.stop="editMyApp('2', itm.appId)"
                    class="tw-ecoapplist-img-icon"
                    src="./assets/delApp.png"
                  />
                </a>
              </div>
              <!-- <div
                :style="{
                  width: `calc(100% / ${numPerRow})`
                }"
                class="tw-ecoapplist-module-item"
              >
                <a @click.stop="editeMyApp" class="tw-ecoapplist-app xaddbtn">
                  <div>
                    <img class="tw-ecoapplist-app-img" :src="addbtn" />
                    <div class="tw-ecoapplist-app-body">
                      <h4 class="tw-ecoapplist-app-title">{{btnEditeStatus ? "正在添加" : "添加应用"}}</h4>
                    </div>
                  </div>
                  
                </a>
              </div> -->
            </div>
          </div>
          <!-- 我的应用-end -->
        </div>
        <div style="font-size: 18px;">全部应用</div>
        <div
          :style="{ visibility: showappcate ? 'visible' : 'hidden' }"
          :class="{ 'tw-ecoapplist-center': !appId }"
        >
          <ul class="tw-ecoapplist-tabs">
            <li
              :class="{ xactive: activeIndex === index }"
              v-for="(item, index) of appcateList"
              :key="index"
              @click="changeAppList(index, item.categoryId)"
            >
              {{ item.label }}
            </li>
          </ul>
          <el-input
            @keyup.enter="getAllAppList(seachText)"
            class="tw-ecoapplist-center-input"
            placeholder="搜索应用..."
            v-model.trim="seachText"
          >
            <template #suffix>
              <i class="el-icon-search el-input__icon" @click="getAllAppList(seachText)"></i>
            </template>
          </el-input>
        </div>
        <div class="tw-ecoapplist-tabs-content" v-if="groupAppList.length >= 1">
          <!-- <div v-for="(item, index) of groupAppList" :key="index" :id="'tw-ecoapplist' + item.categoryId">
            <div class="tw-ecoapplist-title xsub">
              <span>{{ item.label }}</span>
            </div> -->

            <!-- <ul v-if="item.list.length >= 1" class="tw-ecoapplist-module"> -->
            <ul v-if="currentAppList&&currentAppList.list.length >= 1" class="tw-ecoapplist-module">
              <li
                @click.stop="appEnter(itm, groupAppList)"
                :style="{
                  width: `calc(100% / ${numPerRow})`
                }"
                v-for="(itm, inx) of currentAppList.list"
                :key="inx"
                class="tw-ecoapplist-module-item"
              >
                <a class="tw-ecoapplist-app">
                  <img
                    class="tw-ecoapplist-app-img"
                    v-if="itm.img"
                    :src="itm.img.startsWith('http') ? itm.img : `${fsBaseUrl || gateway}/fs/media${itm.img}`"
                    @error="imgError"
                  />
                  <img
                    class="tw-ecoapplist-app-img"
                    v-else-if="appImages[inx]"
                    :src="`${fileBaseUrl}${appImages[inx].localPath}`"
                    @error="imgError"
                  />
                  <img class="tw-ecoapplist-app-img" v-else :src="defaultApp" />
                  <div class="tw-ecoapplist-app-body">
                    <el-tooltip effect="dark" :content="itm.appName" placement="top-start">
                      <h4 class="tw-ecoapplist-app-title">{{ itm.appName }}</h4>
                    </el-tooltip>
                 
                  </div>
                  <img
                    v-if="btnEditeStatus && setAppList(itm)"
                    @click.stop="editMyApp('1', itm)"
                    class="tw-ecoapplist-img-icon"
                    src="./assets/addApp.png"
                  />
                </a>
              </li>
            </ul>
            <!-- <tw-lib-nodata v-else /> -->
          <!-- </div> -->
        </div>
        <!-- <tw-lib-nodata v-else /> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import axios from "@/management/api/eco/base";
import { openApp } from "@/management/api/eco/appcenter";
const fsBaseUrl = ref(window.$app.fsBaseUrl);
const gateway = ref(window.$app.gateway);
const fileBaseUrl = ref(window.$app.fileBaseUrl);

</script>
<script>
import defaultApp from "./assets/app-default.png";
import addbtn from "./assets/addbtn.png";

export default {
  name: "EcoAppList",

  data() {
    return {
      path: "",
      isPath: true,
      currentColor: ".currentColor",
      defaultApp,
      displayPlatformArr: [[""], ["pc"], ["mobile"], ["pc", "mobile"]],
      showappcate: false,
      appListCopy: [],
      paasName: "",
      preventReClick: true,
      isDocMenu: false,
      commentShow: true,
      comments: [],
      commentAdd: {
        appComment: "",
        score: "",
        appId: "",
        userId: ""
      },
      value1: "",
      appId: "",
      appInfo: "",
      collect_app_max_count: 10,
      otherAppName: "",
      otherAppPath: "",
      innerText: "",
      dialogVisible: false,
      currentApp: {},
      curOtherAppList: [],
      appDownload: {
        windowsX64downloadUrl: "",
        windowsX32downloadUrl: "",
        windowsXAlldownloadUrl: "",
        macAppdownloadUrl: "",
        linuxAppdownloadUrl: "",
        androidAppdownloadUrl: "",
        iosAppdownloadUrl: ""
      },
      isShowDownload: false,
      activeIndex: 0,
      seachText: "",
      btnEditeStatus: false,
      drag: false,
      downBtn: false,
      appcatesortList: [],
      appcateList: [],
      groupAppList: [],
      appList: "",
      appAuthList: [],
      osTypeOptions: [
        {
          label: "教学应用",
          value: "1",
          color: "#94adff"
        },
        {
          label: "学习应用",
          value: "2",
          color: "#87a0c5"
        },
        {
          label: "管理应用",
          value: "3",
          color: "#679fff"
        },
        {
          label: "评价应用",
          value: "4",
          color: "#ff9640"
        },
        {
          label: "教研应用",
          value: "5",
          color: "#8787ff"
        },
        {
          label: "其他应用",
          value: "6",
          color: "#87a0c5"
        },
        {
          label: "资源应用",
          value: "7",
          color: "#ff8b6d"
        },
        {
          label: "课堂应用",
          value: "8",
          color: "#02a4f9"
        },
        {
          label: "授课工具",
          value: "9",
          color: "#878bff"
        }
      ],
      appRecentVisit: [],
      authList: [],
      allAppList: [],
      delAppList: [],
      appType: "4",
      appTime: 1000,
      ifDownloadUrl: true,
      numPerRow: 6,
      tipThirdPartyApp: false,
      isCate: true,
      scrollHeight: 90,
      appImages: [],
      webName: "ECO平台",
      documentUrl: "/dev/#/integrate/api/readme",

      currentAppList: {list: []},
      visitAppList: []
    };
  },
  computed: {
    displayPlatformFilter() {
      let index = 0;
      if (this.appType === "4") {
        index = 1;
      } else {
        index = Number(this.appType);
      }
      return this.displayPlatformArr[index];
    }
  },

  created() {
    this.getcollection();
    this.getAppMaxCount();
    this.getPaasName();
    this.isCate ? this.queryAllTypeByLang() : this.getAppCatesortList();
  },

  methods: {
    imgError(e) {
      e.target.src = this.defaultApp;
    },
    deepClone(obj) {
      // 判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
      let objClone = Array.isArray(obj) ? [] : {};
      // 进行深拷贝的不能为空，并且是对象或者是
      if (obj && typeof obj === "object") {
        for (const key in obj) {
          // eslint-disable-next-line no-prototype-builtins
          if (obj.hasOwnProperty(key)) {
            if (obj[key] && typeof obj[key] === "object") {
              objClone[key] = this.deepClone(obj[key]);
            } else {
              objClone[key] = obj[key];
            }
          }
        }
      }
      return objClone;
    },

    toDetails(item) {
      if (this.btnEditeStatus) return;
      this.$router.push({
        name: "appdetail",
        query: {
          appId: item.id
        }
      });
    },
    queryAllTypeByLang() {
      const parmas = `Language=zh_CN`; // 'en-US' ? 'Language=en_US' : 'Language=zh_CN'
      this.axiosApi("/openapi-uc/appType/queryAllTypeByLang", parmas, "post", {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;"
        }
      }).then(res => {
        if (res.pageInfo && res.pageInfo.list && res.pageInfo.list.length >= 1) {
          const list = res.pageInfo.list.map(x => {
            return {
              value: x.appType,
              categoryId: x.appType,
              label: x.typeName,
              sortNum: x.sortNum || ""
            };
          });
          this.osTypeOptions = list;
          this.appcatesortList = [
            {
              categoryId: "11",
              label: "我的应用",
              sortNum: 11
            },
            {
              categoryId: "0",
              label: "最近访问",
              sortNum: 0
            },
            ...list
          ];
          this.allAppList = [];
          this.appcateList = [...list]
          this.appcatesortList.map(req => {
            this.allAppList.push({ ...req, list: [] });
          });
          this.getAllAppList();
        }
      });
    },
    getAppCatesortList() {
      this.axiosApi("/openapi-uc/appcatesort/list", {}).then(res => {
        if (res.pageInfo.list && res.pageInfo.list.length >= 1) {
          const list = res.pageInfo.list;
          list.map(res => {
            const index = this.osTypeOptions.findIndex(reqs => {
              return reqs.value === res.categoryId;
            });
            if (index >= 0) res.label = this.osTypeOptions[index].label;
          });
          this.appcatesortList = [
            {
              categoryId: "11",
              label: "我的应用",
              sortNum: 11
            },
            {
              categoryId: "0",
              label: "最近访问",
              sortNum: 0
            },
            ...res.pageInfo.list
          ];
          this.appcateList = [...res.pageInfo.list]
          this.allAppList = [];
          this.appcatesortList.map(req => {
            this.allAppList.push({ ...req, list: [] });
          });
          this.getAllAppList();
        }
      });
    },

    isHttpReq (url) {
      if (url) {
        if (url.indexOf("https://") !== -1 || url.indexOf("http://") !== -1 || url.startsWith("/")) {
          return true;
        }
      }
      return false;
    },
    appEnter(app, appList) {
      if (this.btnEditeStatus) return;
      const vm = this;
      // 区分当前应用是否为第三方，只有第三方应用才会弹窗（目前以名称过滤掉）
      // || app.callbackUrl
      let url = app.url || app.domain || app.h5Domain;
      if (!url || url.length < 1) {
        window.$ui.msg({
          type: "info",
          message: "该应用不可打开"
        });
        return;
      }
      if (!this.isHttpReq(url)) {
        url = "//" + url;
      }
      let isOtherApp = false;
      if (url.indexOf(window.location.hostname) < 0) {
        // 取配置项中的全部配置应用
        isOtherApp = true;
      }

      if (vm.tipThirdPartyApp && isOtherApp) {
        vm.currentApp = app;
        vm.otherAppPath = app.url || app.domain || app.h5Domain;
        vm.otherAppName = app.name || app.appName;
        vm.innerText = app.inner || app.contactInfo;
        vm.dialogVisible = true;
      } else {
        if (url) {
          const relayHref = url;
          openApp(relayHref, { authAppId: app.appId }, "_blank");
        }
      }
    },
  
    setAppList(item) {
      const flag = this.appList.some(x => {
        return x.appId === item.id;
      });
      return !flag;
    },

    editMyApp(type, item) {
      if (type === "1") {
        // 添加
        if (this.appList.length > this.collect_app_max_count * 1 - 1) {
          window.$ui.msg({
            type: "info",
            message: "已经超过我的应用最大数量，无法添加"
          });
          return;
        }
        const flag = this.appList.some(x => {
          return x.appId === item.id;
        });
        if (flag) {
          window.$ui.msg({
            type: "info",
            message: "重复添加应用"
          });
        } else {
          const obj = {
            appInfo: item,
            appId: item.id,
            userId: window.$app.user.userId,
            sortNo: this.appList.length + 1
          };
          this.appList.push(obj);
        }
      } else {
        // 删除
        const index = this.appList.findIndex(x => {
          return x.appId === item;
        });
        this.delAppList.push(this.appList[index].appId);
        this.appList.splice(index, 1);
      }
    },

    deletcollection(appids) {
      this.axiosApi(
        "/openapi-uc/app/v2/deletcollection",
        {
          userId: window.$app.user.userId,
          appids
        },
        "post"
      ).then(res => {
        if (res.serverResult.resultCode === "200") {
          window.$ui.msg({
            type: "success",
            message: "保存成功"
          });
          this.btnEditeStatus = false;
          this.getcollection();
        } else {
          window.$ui.msg({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },

    getcollection() {
      this.axiosApi(
        "/openapi-uc/app/v2/getcollection",
        {
          userId: window.$app.user.userId,
          appTerminal: "1",
          displayPlatformFilter: this.displayPlatformFilter
        },
        "post"
      )
        .then(res => {
          if (res.pageInfo && res.pageInfo.list && res.pageInfo.list.length >= 1) {
            const list = res.pageInfo.list;
            this.appList = list;
            this.btnEditeStatus = false;
          } else {
            this.appList = [];
          }
        })
        .catch(err => {
          this.appList = [];
          console.log(err);
        });
    },
    // 取消保存
    canelSave() {
      this.appList = this.appListCopy;
      this.btnEditeStatus = false;
    },
    editeMyApp() {
      if (this.btnEditeStatus) {
        if (this.appList.length < 1 && this.delAppList.length >= 1) {
          this.deletcollection(this.delAppList);
        } else if (this.appList.length >= 1) {
          const appCollections = this.appList.map(req => {
            return {
              appId: req.appId,
              userId: window.$app.user.userId,
              sortNo: req.sortNo
            };
          });

          this.axiosApi("/openapi-uc/app/v2/collection", { appCollections }, "post").then(res => {
            if (res.serverResult.resultCode === "200") {
              window.$ui.msg({
                type: "success",
                message: "保存成功"
              });
              this.getcollection();
            } else {
              window.$ui.msg({
                type: "error",
                message: "保存失败"
              });
            }
          });
        } else {
          this.btnEditeStatus = false;
        }
      } else {
        this.btnEditeStatus = true;
        this.appListCopy = this.deepClone(this.appList);
      }
    },

    async getAllAppList(appName) {
      if (!this.preventReClick) return;
      this.preventReClick = false;
      this.allAppList.forEach(f => {
        f.list = [];
      });
      const parmas = {
        appName,
        appTerminal: "1",
        userId: window.$app.user.userId,
        displayPlatformFilter: this.displayPlatformFilter,
        startTime: "1999-01-01 00:00:00"
      };
      const parmas1 = {
        userId: window.$app.user.userId,
        appName,
        mateRoleType: "1",
        managerStatus: "1",
        appTerminal: "1",
        displayPlatformFilter: this.displayPlatformFilter
      };
      const data = await this.axiosApiAll(
        [
          { url: "/openapi-uc/app/getAppRecentVisit", parmas },
          { url: "/openapi-uc/app/auth/list", parmas: parmas1 }
        ],
        "post"
      );
      this.getAppRecentVisit(data[0], appName);
      const res = data[1];
      if (res.pageInfo.list && res.pageInfo.list.length >= 1) {
        this.authList = res.pageInfo.list;
        this.allAppList[1].list = this.appRecentVisit;
        this.authList.forEach(req => {
          this.allAppList.forEach(reqs => {
            if (req.type === reqs.categoryId) {
              reqs.list.push({
                id: req.id,
                appId: req.appId,
                appName: req.appName,
                name: req.appName,
                url: req.domain || req.h5Domain || req.callbackurl,
                addAccreditCode: true,
                img: req.icon1 ? `${window.$app.fsBaseUrl || window.$app.gateway}/fs/media${req.icon1}` : "",
                hasFile: req.hasFile,
                inner: (req.inner && req.inner.replace(/\n/g, "<br />")) || ""
              });
            }
          });
        });
        this.groupAppList = this.allAppList.filter((x, i) => {
          return x.list.length >= 1;
        });
        if (!appName) {
          this.appcatesortList = this.appcatesortList.filter(y => {
            return (
              this.groupAppList.findIndex(g => {
                return g.categoryId === y.categoryId;
              }) >= 0 || y.categoryId === "11"
            );
          });
          this.showappcate = true;
          this.appcateList = this.appcatesortList.filter(y => {
            return y.categoryId !== "11" && y.categoryId !== "0";
          });
        }

        this.visitAppList = this.groupAppList.filter(g => {
          return g.categoryId === '0';
        })
        try {
          let categoryId = this.appcateList[this.activeIndex].categoryId;
          let cindex = this.groupAppList.findIndex(x => {
            return x.categoryId === categoryId;
          });
          this.currentAppList = this.groupAppList[cindex]
        } catch (error) {
          console.log(error);
        }
        console.log(this.groupAppList)
      } else {
        this.allAppList[1].list = this.appRecentVisit;
        this.groupAppList = [];
        this.visitAppList = []

        this.currentAppList = {list: []}
      }

      const temp = setTimeout(() => {
        this.preventReClick = true;
        clearTimeout(temp);
      }, this.appTime);
    },

    /**
     * @description: 获取最近访问应用
     * @param {*}
     * @return {*}
     */
    getAppRecentVisit(res, appName) {
      if (appName) {
        this.appRecentVisit = this.appRecentVisit.filter(y => {
          return y.name.indexOf(appName) >= 0;
        });
        return;
      }

      if (res.pageInfo && res.pageInfo.list && res.pageInfo.list.length >= 1) {
        this.appRecentVisit = res.pageInfo.list.map(x => {
          // || x.callbackUrl
          return {
            ...x,
            img: x.icon1 ? `${window.$app.fsBaseUrl || window.$app.gateway}/fs/media${x.icon1}` : "",
            id: x.id,
            appId: x.appId,
            name: x.appName,
            url: x.domain || x.h5Domain || x.callbackurl,
            hasFile: x.hasFile,
            inner: (x.contactInfo && x.contactInfo.replace(/\n/g, "<br />")) || ""
          };
        });
      } else {
        this.appRecentVisit = [];
      }
    },
    axiosApiAll(arr = [], type = "post") {
      return new Promise((resolve, reject) => {
        let requestPromiseArray = [];
        arr.forEach(item => {
          const request = axios[type](`${window.$app.gateway}${item.url}`, item.parmas).then(res => res);
          requestPromiseArray.push(request);
        });
        Promise.all(requestPromiseArray)
          .then(responseList => {
            resolve(responseList);
          })
          .catch(err => {
            reject(err);
          });
      });
    },

    async axiosApi(url, parmas = {}, type = "post", headers) {
      let resq;
      try {
        resq = await axios[type](`${window.$app.gateway}${url}`, parmas, headers);
      } catch (error) {
        console.log("error", error);
        resq = "";
      }
      console.log(resq);
      if (resq && resq.serverResult.resultCode === "200") {
        return resq;
      } else {
        window.$ui.msg({
          message: resq.serverResult.resultMessage,
          type: "error"
        });
      }
    },

    getPaasName() {
      const params = {
        singleTable: "true",
        conditions: [
          {
            fieldName: "key",
            fieldValues: ["paas_platform_name"],
            operator: "FUZZY_MATCH",
            prepender: "AND"
          },
          {
            fieldName: "status",
            fieldValues: ["1"],
            operator: "EQUAL",
            prepender: "AND"
          }
        ],
        pagination: { numPerPage: 10, pageNo: 1 }
      };

      this.axiosApi("/openapi-uc/sys/config/search", params, "post")
        .then(res => {
          if (res.pageInfo && res.pageInfo.list && res.pageInfo.list.length >= 1) {
            this.paasName = res.pageInfo.list[0].value;
          } else {
            this.paasName = this.webName;
          }
        })
        .catch(err => {
          console.log(err);
          this.paasName = this.webName;
        });
    },
    getAppMaxCount() {
      const params = {
        singleTable: "true",
        conditions: [
          {
            fieldName: "key",
            fieldValues: ["collect_app_max_count"],
            operator: "FUZZY_MATCH",
            prepender: "AND"
          },
          {
            fieldName: "status",
            fieldValues: ["1"],
            operator: "EQUAL",
            prepender: "AND"
          }
        ],
        pagination: { numPerPage: 10, pageNo: 1 }
      };

      this.axiosApi("/openapi-uc/sys/config/search", params, "post").then(res => {
        if (res.pageInfo && res.pageInfo.list && res.pageInfo.list.length >= 1) {
          this.collect_app_max_count = res.pageInfo.list[0].value;
        } else {
          this.collect_app_max_count = 10;
        }
      });
    },
    changeAppList(index, categoryId) {
      this.activeIndex = index;
      let cindex = this.groupAppList.findIndex(x => {
        return x.categoryId === categoryId;
      });
      this.currentAppList = this.groupAppList[cindex]
    }
  }
};
</script>

<style lang="scss">
@use "./css/index.scss";
</style>
